<template>
  <div>
    <Row>
      <Card>
        <Icon type="md-people"></Icon>
        贷款管理
      </Card>
      <Card>
        <div >
          <Input v-model="searchObj.applyName" placeholder="请输入客户姓名搜索..." class="searchItem"/>
          <Input v-model="searchObj.applyMobile" placeholder="请输入联系方式搜索..." class="searchItem"/>
          <Select v-model="searchObj.status" placeholder="请选择状态" class="searchItem">
            <Option :value="1">已否决</Option>
            <Option :value="2">初审否决</Option>
            <Option :value="3">已放款</Option>
            <Option :value="4">申请中</Option>
            <Option :value="5">初审通过</Option>
          </Select>
          <Button style="float: right" type="primary" @click="model = true" >导出</Button>
        </div>
        <div style="margin-top: 10px;">
          <Input v-model="searchObj.managerName" placeholder="请输入客户经理姓名搜索..." class="searchItem"/>
          <DatePicker type="date" placeholder="请选择日期" style="width: 200px" @on-change="changeDate" />
          <Button type="primary" style="" class="searchButton" icon="search" @click="search()">搜索</Button>
          <Button @click="cancel">取消</Button>

        </div>
        <Modal
          v-model="model"
          title="选择导出项"
          @on-ok="excel">
          <CheckboxGroup v-model="columnsTitle2" @on-change="change">
            <Checkbox v-for=" (item, index) in columnsTitle1" :key="index" :label="item.value">{{item.label}}</Checkbox>
          </CheckboxGroup>
        </Modal>
        <div class="edittable-con-1 list" style="">
          <Table border ref="selection" :columns="columns" :data="list"></Table>
        </div>
        <div style="text-align: center;margin-top: 20px">
          <Page :current="pageId" :total="totalPage" :page-size="10" :pageSizeOpts="[10, 20, 30, 40, 50, 60, 70, 80, 90, 100]" @on-change='search' show-sizer @on-page-size-change="changePageSize"></Page>
        </div>
      </Card>
    </Row>
  </div>
</template>

<script>
  import { getApplicationList } from '@/api/loan'
  import excel from '@/libs/excel'

  export default {
    name: 'newspaper-list',
    data () {
      return {
        userType: parseInt(this.$store.state.user.userType),
        model: false,
        columnsTitle1: [
          { label:'编号', value: '{"title":"编号","key":"id"}' },
          { label:'身份证号码', value:'{"title":"身份证号码","key":"IDNumber"}' },
          { label:'客户姓名', value: '{"title":"客户姓名","key":"applyName"}' },
          { label:'手机号码', value: '{"title":"手机号码","key":"applyMobile"}' },
          { label:'渠道来源', value: '{"title":"渠道来源","key":"channelSrc"}' },
          { label:'贷款金额', value: '{"title":"贷款金额","key":"loanAmount"}' },
          { label:'客户经理姓名', value: '{"title":"客户经理姓名","key":"name"}' },
          { label:'创建时间', value: '{"title":"创建时间","key":"createTime"}' },
          { label:'状态', value: '{"title":"状态","key":"status"}' }
        ],
        columnsTitle2: [
          '{"title":"编号","key":"id"}',
          '{"title":"身份证号码","key":"IDNumber"}',
          '{"title":"客户姓名","key":"applyName"}',
          '{"title":"手机号码","key":"applyMobile"}',
          '{"title":"渠道来源","key":"channelSrc"}',
          '{"title":"贷款金额","key":"loanAmount"}',
          '{"title":"客户经理姓名","key":"name"}',
          '{"title":"创建时间","key":"createTime"}',
          '{"title":"状态","key":"status"}'
        ],
        excelDate:[
          ['编号','身份证号码', '客户姓名', '手机号码','渠道来源','贷款金额','推荐人','客户经理姓名','创建时间','状态'],
          ['id', 'IDNumber', 'applyName','applyMobile','channelSrc','loanAmount','name','managerName','createTime','status']
        ],
        searchObj: {
          applyName: '',
          applyMobile: '',
          status: '',
          createTime: '',
          managerName: '',
          paginate: 10,
          pageId: 1
        },
        columns: [
          {
            title: '编号',
            align: 'center',
            key: 'id',
            width: 100
          },
          {
            title: '客户姓名',
            align: 'center',
            key: 'applyName',
          },
          {
            title: '身份证号码',
            align: 'center',
            key: 'IDNumber',
            width: 100
          },
          {
            title: '手机号码',
            align: 'center',
            key: 'applyMobile'
          },
          {
            title: '来源渠道',
            align: 'center',
            render: (h, params) => {
              switch (params.row.channelSrc) {
                case 1:
                  return h('Tag', {
                    props: {
                      color: 'success'
                    }
                  }, '寿险渠道');
                  break
                case 2:
                  return h('Tag', {
                    props: {
                      color: 'error'
                    }
                  }, '同行渠道');
                  break
                case 3:
                  return h('Tag', {
                    props: {
                      color: 'success'
                    }
                  }, '入围公司');
                  break
                case 4:
                  return h('Tag', {
                    props: {
                      color: 'error'
                    }
                  }, '其他渠道');
                  break
              }
            }
          },
          {
            title: '贷款金额',
            align: 'center',
            key: 'loanAmount'
          },
          {
            title: '推荐人',
            align: 'center',
            key: 'name'
          },
          {
            title: '客户经理姓名',
            align: 'center',
            key: 'managerName',
            width: 120
          },
          {
            title: '创建时间',
            align: 'center',
            key: 'createTime',
            width: 100
          },
          {
            title: '状态',
            align: 'center',
            render: (h, params) => {
              switch (params.row.status) {
                case 1:
                  return h('Tag', {
                    props: {
                      color: 'success'
                    }
                  }, '已否决');
                  break
                case 2:
                  return h('Tag', {
                    props: {
                      color: 'error'
                    }
                  }, '初审否决');
                  break
                case 3:
                  return h('Tag', {
                    props: {
                      color: 'success'
                    }
                  }, '已放款');
                  break
                case 4:
                  return h('Tag', {
                    props: {
                      color: 'error'
                    }
                  }, '申请中');
                  break
                case 5:
                  return h('Tag', {
                    props: {
                      color: 'success'
                    }
                  }, '初审通过');
                  break
              }
            }
          },
          {
            title: '操作',
            align: 'center',
            key: 'handle',
            render: (h, params) => {
              return h('div', [
                h('Button', {
                  props: {
                    type: 'primary',
                    size: 'small'
                  },
                  style: { marginRight: '10px' },
                  on: {
                    click: () => {
                      this.goDetail(params.row.id, params.row.cid)
                    }
                  }
                }, '查看详情'),
                h('Poptip', {
                  props: {
                    confirm: true,
                    title: '您确定要删除这条数据吗?',
                    transfer: true
                  },
                  on: {
                    'on-ok': () => {
                      this.del(params.row.id)
                    }
                  }
                }, [
                  h('Button', {
                    props: {
                      type: 'error',
                      size: 'small'
                    }
                  }, '删除')
                ])
              ])
            }
          }
        ],
        list: [],
        pageId: 1,
        totalPage: 10
      }
    },
    methods: {
      changePageSize (data) {
        this.searchObj.paginate = data
        this.getList()
      },
      changeDate (date) {
        this.searchObj.createTime = date
      },
      change (data) {
        if (data.length) {
          let _excelDate = [[],[]]
          data.forEach( item => {
            const itemData = JSON.parse(item)
            _excelDate[0].push(itemData.title)
            _excelDate[1].push(itemData.key)
          })
          this.excelDate = _excelDate
        }
      },
      getList () {
        let data
        if (this.userType === 2) {
          data = this.searchObj
        } else {
          data = Object.assign({}, this.searchObj, { adminId:this.$store.state.user.userId })
        }
        getApplicationList(data).then(data => {
          this.list = data.data
          this.pageId = data.current_page
          this.totalPage = data.total
        })
      },
      excel () {
        if (this.list.length) {
          this.exportLoading = true
          const params = {
            title: this.excelDate[0],
            key: this.excelDate[1],
            data: this.list,
            autoWidth: true,
            filename: '贷款列表'
          }
          excel.export_array_to_excel(params)
          this.exportLoading = false
        } else {
          this.$Message.info('表格数据不能为空！')
        }
      },
      goDetail (id, cid) {
        this.$router.push({
          name: 'user_customer_detail',
          query: {
            id: id,
            cid: cid
          }
        })
      },
      cancel () {
        this.searchObj = {
          applyName: '',
          applyMobile: '',
          status: '',
          createTime: '',
          managerName: '',
          paginate: 10,
          pageId: 1
        },
        this.getList()
      },
      search () {
        console.log(arguments)
        if (arguments[0]) {
          this.searchObj.pageId = arguments[0]
        }
        this.getList()
      },
    },
    mounted () {
      this.getList()
    }
  }
</script>

<style scoped>

</style>
